<template>
  <el-dialog :title="title" :visible="showDialog" @close="btnCancel">
    <el-form
      ref="addformRef"
      :model="addForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item prop="subjectID" label="所属学科">
        <el-select
          v-model="addForm.subjectID"
          placeholder="请选择"
          style="width: 80%"
        >
          <!-- @focus="getDisciplineList" -->
          <el-option
            v-for="(item, index) in tagNames"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="tagName" label="目录名称">
        <el-input
          v-model="addForm.tagName"
          placeholder="请输入目录名称"
          style="width: 80%"
        />
      </el-form-item>

      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  getDisciplineList,
  addDisciplineList,
  getDisciplineMessage,
  editDirectory
} from '@/api/label'
export default {
  name: 'Add',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addForm: {
        id: '',
        creator: '',
        addDate: '',
        totals: '',
        state: '',
        subjectID: '', // 学科ID
        tagName: '' // 目录名称
      },
      tagNames: {},
      rules: {
        subjectID: [
          { required: true, message: '所属学科不能为空', trigger: 'change' }
        ],
        tagName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      if (this.addForm.id) {
        return '修改学科'
      } else {
        return '新增学科'
      }
    }
  },
  created() {
    this.getDisciplineList()
  },
  methods: {
    // 获取学科简单目录
    async getDisciplineList() {
      const { data } = await getDisciplineList(this.addForm)
      console.log(data)
      const Obj = { ...data }
      this.tagNames = Obj
    },
    // 确认  {添加} 或 {修改}
    btnOK() {
      this.$refs.addformRef.validate(async (isOk) => {
        try {
          if (this.addForm.id) {
            await editDirectory(this.addForm)
            this.$parent.getDirectoryList()
            this.$emit('update:showDialog', false)
            const h = this.$createElement
            this.$notify({
              title: '提示',
              message: h('i', { style: 'color: black' }, '修改成功')
            })
          } else {
            await addDisciplineList(this.addForm)
            this.$parent.getDirectoryList()
            this.$parent.showDialog = false
            const h = this.$createElement
            this.$notify({
              title: '提示',
              message: h('i', { style: 'color: black' }, '添加成功')
            })
          }
        } catch (err) {
          console.log(err)
        }
      })
    },
    // 取消
    btnCancel() {
      this.addForm = {
        subjectID: '',
        tagName: ''
      }
      this.$refs.addformRef.resetFields()
      this.$parent.showDialog = false
    },
    // 获取目录详情数据
    async getDisciplineMessage(id) {
      const { data } = await getDisciplineMessage(id)
      console.log(data)
      this.addForm = data
    }
  }
}
</script>

<style lang="scss" scoped></style>
>
